<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据爬取</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" style="margin-top: 150px;margin-left: 50px; margin-right: 50px">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="数据查看" name="first">
            <el-table
                    :data="tableData"
                    stripe
                    :default-sort = "{prop: 'publishTime', order: 'descending'}"
                    style="width: 100%; margin-top: 10px;">
                <el-table-column
                        label="标题"
                        width="370px">
                    <template slot-scope="scope">
                        <a :href="scope.row.link">{{scope.row.title}}</a>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="publishTime"
                        label="发布时间"
                        sortable
                        width="120px">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.publishTime}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="所属地块"
                        width="160px">
                    <template slot-scope="scope">
                        <el-tag type="warning">{{scope.row.positionInfo}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="房屋面积"
                        width="100px">
                    <template slot-scope="scope">
                        <el-tag type="success">{{scope.row.houseArea}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="楼层"
                        width="140px">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.floor}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="关注"
                        width="90px">
                    <template slot-scope="scope">
                        <el-tag type="info">{{scope.row.followers}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="建造年份"
                        width="100px">
                    <template slot-scope="scope">
                        <el-tag type="warning">{{scope.row.buildYear}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="朝向"
                        width="70px">
                    <template slot-scope="scope">
                        <el-tag type="info">{{scope.row.orientation}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="单价"
                        width="160px">
                    <template slot-scope="scope">
                        <el-tag type="success">{{scope.row.unitPrice}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="挂牌价"
                        sortable
                        width="100px">
                    <template slot-scope="scope">
                        <el-tag type="danger">{{scope.row.listingPrice}}万</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="添加时间"
                        width="110px">
                    <template slot-scope="scope">
                        <el-tag type="info">{{scope.row.crawlTime}}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 10px;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="数据爬取" name="second">
            <h4 style="text-align: center">数据爬取</h4>
            <div>
                <el-input style="width: 60%" placeholder="请输入url" v-model="inputData">
                    <template slot="prepend">Http://</template>
                </el-input>
                <el-radio-group v-model="crawlType" @change="clickCrawlType">
                    <el-radio-button label="二手房"></el-radio-button>
                    <el-radio-button label="已成交"></el-radio-button>
                </el-radio-group>
                <el-button type="primary" :loading="loading" icon="el-icon-search" @click="startCrawl">开始爬取</el-button>
            </div>
        </el-tab-pane>
        <el-tab-pane label="定时任务" name="third">

        </el-tab-pane>
    </el-tabs>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                inputData: '',
                loading: false,
                visible: false,
                tableData: [],
                activeName: 'first',
                crawlType: "二手房",
                type: "ershou",
                // 分页
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                },
            }
        },
        created() {
            this.getSaleHouseList();
        },
        methods: {
            getSaleHouseList() {
                axios.get('/api/sale?page='+this.page.currentPage+'&pageSize='+this.page.pageSize).then(resp => {
                    if (resp.status === 200) {
                        this.tableData = resp.data;
                        this.page.total = resp.data.length;
                    } else {
                        this.$message.error('噢哦，请求失败!请再次尝试!╮(╯_╰)╭');
                    }
                })
            },
            // 更换tab
            handleClick(tab, event) {
                console.log(tab.name);
                if (tab.name === "first") {
                    this.getSaleHouseList();
                }
            },
            clickCrawlType() {
              if (this.crawlType === "二手房") {
                  this.type = "ershou";
              } else if (this.crawlType === "已成交") {
                  this.type = "chenjiao";
              }
            },
            startCrawl() {
                if ('' === this.inputData) {
                    this.$message.error('搜索框不可为空哦!╮(╯_╰)╭');
                    return;
                }
                axios.post('/api/crawl_deal/?url=' + this.inputData + '&type=' + this.type).then(resp => {
                    console.info(resp);
                    if (resp) {
                        this.$message({
                            message: '成功开始爬取数据!',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('噢哦，爬取失败!请稍后再试!╮(╯_╰)╭' + resp.data.message);
                    }
                }).catch(error => {
                    console.log(error);
                })
            },
            // 改变分页大小
            handleSizeChange:function (pageSize) {
                console.info('当前页:', this.page.currentPage);
                console.info('当前页大小:', pageSize);
                this.page.pageSize = pageSize;
                this.getSaleHouseList();
            },
            // 改变当前页数
            handleCurrentChange:function (currentPage) {
                console.info('当前页:', currentPage);
                console.info('当前页大小:', this.page.pageSize);
                this.page.currentPage = currentPage;
                this.getSaleHouseList();
            }
        }
    })
</script>
</body>
</html>